<template>
  <div class="daily">
    <ul>
      <li
        class="dailys"
        v-for="(item, i) in dailySongs"
        :key="item.id"
        @click="
          gosongDetail(item.id);
          change(i);
        "
      >
        <img :src="item.al.picUrl" alt="" />
        <div class="lists">
          <span class="songname">{{ item.name }}</span>
          <div class="singers">
            <span class="quality">SQ</span>
            <span class="singername" v-for="v in item.ar" :key="v.id">
              - {{ v.name }}</span
            >
          </div>
        </div>
        <van-icon name="play-circle-o" size="21" color="#B3B3B3" />
        <van-icon name="weapp-nav" class="weapp" />
      </li>
    </ul>
  </div>
</template>

<script>
import { getDailySongAPI } from "../../api/home";
export default {
  name: "daily",
  data() {
    return {
      dailySongs: [],
    };
  },
  props: [],
  components: {},
  computed: {},
  methods: {
    async getDailySong() {
      const result = await getDailySongAPI();
      this.dailySongs = result.data.dailySongs;
      console.log(this.dailySongs);
    },
  },
  watch: {},
  created() {
    this.getDailySong();
  },
  //  组件激活
  activated() {
    // 全局事件总线
    this.$bus.$emit("settitle", this.$route.meta.title);
  },
  mounted() {},
};
</script>

<style scoped>
.daily {
  background-color: #fff;
  border-radius: 10px;
  padding-bottom: 50px;
}
.daily img {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  vertical-align: middle;
}
.daily li {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  padding: 5px;
}
.lists {
  height: 60px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 220px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  justify-content: center;
}
.songname {
  text-indent: 0.5em;
}
.singers {
  width: 220px;
  display: flex;
  font-size: 12px;
  color: #9e9e9e;
  text-indent: 0.3em;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-top: 5px;
}
.quality {
  margin-left: 9px;
  color: #ff6b6b;
  box-sizing: border-box;
  display: inline-block;
  border: 1px solid #ffdddd;
  border-radius: 3px;
  padding: 2px 3px;
  text-align: center;
  text-indent: 0em;
}
.singername {
  line-height: 19px;
}
.weapp {
  margin-left: 10px;
  margin-right: 10px;
}
</style>
